<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<style> table {
    border-collapse: collapse;
    border: 2px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

th, td {
    border: 1px solid black;
    text-align: center;
    padding: 8px;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
} </style>

<style> table {
    border-collapse: collapse;
    border: 2px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

th, td {
    border: 1px solid black;
    text-align: center;
    padding: 8px;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}
</style>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

<body style="text-align: center;">
<h1 style=""><a href="https://www.jd.com">京东 · </a>
    <a href="https://search.dangdang.com">当当</a>
    图书价格比较网</h1>
<form id="search-form" method="get" onsubmit="return false;">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="请输入书名" style="width: 1000px;height: 30px"
               name="book_name" id="book_name">
        <button type="submit" class="btn btn-primary" style="width: 60px; height: 35px; background-color: orange;"
                onclick="search();">
            搜索
        </button>
    </div>
</form>

<br><br><br><br>

<table id="bookTable"></table>
<p id="tip"></p>
<div id="show" style="display: flex; margin: auto; text-align: center;">
    <div id="jd_show" style="width: 600px;height:400px;"></div>
    <div id="dangDang_show" style="width: 600px;height:400px;"></div>
</div>

<div id="summary" style="display: flex;">
    <div id="show_all" style="width: 600px;height:400px;"></div>
    <div>
        <p id="sum" style="font-size: 24px; font-weight: bold; text-align: left;"></p>
        <p id="first" style="text-indent: 2em; text-align: left; display: inline-block;"></p>
        <p id="second" style="text-indent: 2em; text-align: left; display: inline-block;"></p>
        <p id="third" style="text-indent: 2em; text-align: left; display: inline-block;"></p>
        <a id="book_go" style="text-indent: 2em; text-align: left;"></a>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>

<script>
    function search() {
        var bookName = document.getElementById("book_name").value;
        $.ajax({
            url: "/search?book_name=" + bookName,
            type: 'GET',
            success: function (data) {
                // 进行初始化，清空表格和小提示。
                document.getElementById("bookTable").innerHTML = "";
                document.getElementById("tip").innerHTML = "";

                // 加载数据
                var bookTable = document.getElementById("bookTable");
                var lists = JSON.parse(data)
                console.log(data);
                var list_jd = lists.list_jd;
                var list_dangDang = lists.list_dangDang;

                // 运用循环把各个标签写入表格
                for (var i = 0; i < list_jd.length + 1; i++) {
                    var row = bookTable.insertRow(i);
                    var jd_urlCell = row.insertCell(0);
                    var jd_priceCell = row.insertCell(1);
                    var dangDang_urlCell = row.insertCell(2);
                    var dangDang_priceCell = row.insertCell(3)
                    if (i === 0) {
                        jd_urlCell.innerHTML = "京东书名";
                        jd_priceCell.innerHTML = "京东价格";
                        dangDang_urlCell.innerHTML = "当当书名";
                        dangDang_priceCell.innerHTML = "当当价格";
                    } else {
                        jd_urlCell.innerHTML = "<a href='" + list_jd[i - 1].url + "'>京东-" + bookName + "-" + i + "</a>"
                        jd_priceCell.innerHTML = list_jd[i - 1].price;
                        dangDang_urlCell.innerHTML = "<a href='" + list_dangDang[i - 1].url + "'>当当-" + bookName + "-" + i + "</a>"
                        dangDang_priceCell.innerHTML = list_dangDang[i - 1].price;
                    }
                }
                document.getElementById("tip").innerHTML = "<p style='text-align:right'>(** 点击书名可以跳转网页 **)</p>"

                // 进行echart绘图
                var jd_urls = [];
                var jd_prices = [];
                for (var i = 0; i < list_jd.length; i++) {
                    jd_urls.push(bookName + "-" + (i + 1));
                    jd_prices.push(list_jd[i].price);
                }
                var myChart_jd = echarts.init(document.getElementById('jd_show'));
                var option_jd = {
                    title: {
                        text: '京东价格图'
                    },
                    xAxis: {
                        type: 'category',
                        data: jd_urls
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: jd_prices,
                        type: 'line',
                        itemStyle: {normal: {color: 'red', lineStyle: {color: 'red'}}},
                    }]
                };
                myChart_jd.setOption(option_jd);
                var dangDang_urls = [];
                var dangDang_prices = [];
                for (var i = 0; i < list_jd.length; i++) {
                    dangDang_urls.push(bookName + "-" + (i + 1));
                    dangDang_prices.push(list_dangDang[i].price);
                }
                var myChart_dangDang = echarts.init(document.getElementById('dangDang_show'));
                var option_dangDang = {
                    title: {
                        text: '当当价格图'
                    },
                    xAxis: {
                        type: 'category',
                        data: dangDang_urls
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: dangDang_prices,
                        type: 'line',
                        itemStyle: {normal: {color: 'orange', lineStyle: {color: 'orange'}}},
                    }]
                };
                myChart_dangDang.setOption(option_dangDang);
                var myChart_all = echarts.init(document.getElementById('show_all'));
                let lineData = {
                    x: dangDang_urls,
                    y_green: jd_prices,
                    y_blue: dangDang_prices,
                }
                var option_all = {
                    title: {
                        text: '比价总图'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        padding: 10,
                        tooltip: {
                            show: true,
                        },
                        y: 'bottom',
                        data: ['京东价格', '当当价格'],
                    },
                    xAxis: {type: 'category', data: lineData.x},
                    yAxis: {type: 'value'},

                    series: [
                        {
                            name: '京东价格',
                            data: lineData.y_green,
                            type: 'line',
                            itemStyle: {normal: {color: 'green', lineStyle: {color: 'green'}}},
                        },
                        {
                            name: '当当价格',
                            data: lineData.y_blue,
                            type: 'line',
                            itemStyle: {normal: {color: 'blue', lineStyle: {color: 'blue'}}},
                        }
                    ]
                }
                myChart_all.setOption(option_all)

                // 进行总结
                var avg_jd = (list_jd[0].price + list_jd[1].price + list_jd[2].price +
                    list_jd[3].price + list_jd[4].price) / 5;
                var avg_dangDang = (list_dangDang[0].price + list_dangDang[1].price + list_dangDang[2].price +
                    list_dangDang[3].price + list_dangDang[4].price) / 5;
                document.getElementById("sum").innerHTML = "<p style=\"font-size: 24px; font-weight: bold;\ text-align: left;\">总结：</p>";
                document.getElementById("first").innerHTML =
                    "<p style=\"text-indent: 2em;\" style=\"text-align: left; display: inline-block;\">1. 京东网中" + bookName + "的最低价格为：" + list_jd[0].price + "(元)，平均价格为：" + avg_jd + "(元)。" + "</p>";
                document.getElementById("second").innerHTML =
                    "<p style=\"text-indent: 2em;\" style=\"text-align: left; display: inline-block;\">2. 当当网中" + bookName + "的最低价格为：" + list_dangDang[0].price + "(元)，平均价格为：" + avg_dangDang + "(元)。" + "</p>";
                if (list_jd[0].price > list_dangDang[0].price) {
                    document.getElementById("third").innerHTML =
                        "<p style=\"text-indent: 2em;\" style=\"text-align: left; display: inline-block;\">3. 在两个电商网站中,当当网的" + bookName + "价格相对便宜。下方为图书链接>>>" + "</p>";
                    document.getElementById("book_go").innerHTML =
                        "<a href='" + list_dangDang[0].url + "'>当当-" + bookName + "</a>"
                } else {
                    document.getElementById("third").innerHTML =
                        "<p style=\"text-indent: 2em;\" style=\"text-align: left; display: inline-block;\">3. 在两个电商网站中,京东网的" + bookName + "价格相对便宜。下方为图书链接>>>" + "</p>";
                    document.getElementById("book_go").innerHTML =
                        "<a href='" + list_jd[0].url + "'>京东-" + bookName + "</a>"
                }

            }
        });
    }
</script>
</body>
</html>
